

requirejs(['./config'], () => {
  requirejs(['url', 'template', 'header', 'footer', 'zoom', 'fly'], (url, template,header) => {
    class Detail {
      constructor() {
        this.addToCart(header)
        this.showCartTotalNum();
        this.getData().then(resp => {
          this.showlist(resp);
          this.addNum()
          this.reduNum()
          this.zoom()
          $('.colors').on('click', 'li', function () {
            $(this).css({
              borderColor: 'red'
            }).siblings().css({
              borderColor: '#ccc'
            })
          })
          $('.size').on('click', 'li', function () {
            $(this).css({
              borderColor: 'red'
            }).siblings().css({
              borderColor: '#ccc'
            })
          })
        })
      }

      getData() {
        this.id = Number(window.location.search.slice(4))
        return new Promise(resolve => {
          $.get(`${url.rapBaseUrl}/detail`, { id: this.id }, resp => {
            resolve(resp)
          })
        })
      }
      showlist(resp) {
        console.log(resp)
        // 渲染模板引擎
        if (resp.code === 200) {
          // detail详情数据需要存下来为将来加购物车使用
          let { detail } = resp.body
          // rap2才需要在后面多写一个id，真实接口不需要
          this.detail = { ...detail, id: this.id }
          // console.log(this.detail)
          let html = template('main-template', {
            ...this.detail
          })
          $('main').html(html)
        }
      }

      zoom() {
        $(".zoom-img").elevateZoom({
          gallery: "gal1",
          cursor: "pointer",
          borderSize: "1",
          galleryActiceClass: "active",
          borderColor: "#f2f2f2"
        })
      }

      addToCart(header) {
        let _this = this;
        // 为将来渲染进来的按钮绑事件，事件委托
        $('main').on('click', '#addToCart', e => {
          this.fly(e);
          
          // console.log(addNum5)
          // 把详情数据存进localStorage
          // 先判断购物车是否已经有数据
          let cart = localStorage.getItem('cart')
          if (cart) {
            // 说明购物车已经有数据了
            // 先把已有的数据拿到，然后再把当前这条数据加进去，最后重新存储覆盖之前的数据
            cart = JSON.parse(cart)
            console.log(cart)
            // 判断当前商品再购物车中是否已经存在
            const isExist = cart.some(goods => {
              return goods.id === this.id
            })
            if (isExist) {
              // map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
              // 说明当前商品已经再购物车中存在了，找到这条商品，num加一
              cart = cart.map(goods => {
                // console.log(goods)

                // 遍历cart，找到id相等的，num加一，其他的就不动
                if (goods.id === this.id) {goods.num += Number($('#selectNum').html())}
                return goods
              })
            } else {
              // 说明当前商品第一次加入购物车
              cart.push({ ...this.detail, num:Number($('#selectNum').html()), check: true })
            }
            localStorage.setItem('cart', JSON.stringify(cart))
          } else {
            // 购物车为空，咱们就构造一个只有当前这一条数据的数组存进去
            // 数量默认为1（也可以是输入的数量），check属性默认为true，刚加入的时候默认选中
            let arr = [{ ...this.detail, num:Number($('#selectNum').html()), check: true }]
            localStorage.setItem('cart', JSON.stringify(arr))
          }
          
          header.showCartTotalNum()
        })
        
      }


      fly(e) {
        const _this = this;

        $(`<img src="${this.detail.imgs[0].img}" style="width:20px;height:20px;background:#000;">`).fly({

          start: {
            left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
            top: e.clientY,  //开始位置（必填）
          },
          end: {
            left: $('#shopCart').offset().left, //结束位置（必填）
            top: $('#shopCart').offset().top - $(window).scrollTop(),  //结束位置（必填）
          },
          autoPlay: true, //是否直接运动,默认true
          speed: 1.0, //越大越快，默认1.2
          vertex_Rtop: 100, //运动轨迹最高点top值，默认20
          onEnd: function () {
            console.log('222');
            this.destroy(); //移除dom
            _this.showCartTotalNum();
          } //结束回调
        });
      }


      showCartTotalNum() {
        // console.log('showCartTotalNum')
        let num = 0;
        let cart = localStorage.getItem('cart');

        if (cart) {
          cart = JSON.parse(cart);
          num = cart.reduce((res, goods) => {
            res += goods.num;
            return res
          }, 0)
          // console.log('num===',cart,num,$('#shopNum'))
          $('#shopNum').html(num)
        }
      }

      // --------------增加数量------------------
      addNum(){
        $('#add').on('click',function(){
          if($('#selectNum').html()<99){
            $('#selectNum').html($('#selectNum').html()-0+1)
          }
          
        })
      }


      // ----------------减少数量------------------
      reduNum(){
        $('#redu').on('click',function(){
          if($('#selectNum').html()>1){
            $('#selectNum').html($('#selectNum').html()-1)
          }
          
        })
      }

    }
    new Detail()
  })


})

